<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>获取视频弹幕发送以及根据对应时间打开对应视频进度</title>
</head>
<style>
    .video-area{
        display: flex;
    }
    .video{
        width: 30rem;
    }
    .video video{
        width: 100%;
    }
    .list-head{
        display: flex;
    }
    .list-head-item{
        flex:  auto;
        text-align: center;
    }
    .list-item{
        display: flex;
    }
    .hover-show{
        margin: 3rem 10rem;
    }
    .hover-block{
        display: none;
    }
    .hover-show:hover .hover-block{
        display: flex;
        transition: 0.5s;
    }
    .hover-show:hover .normal{
        display: none;
        transition: 0.5s;
    }
    .detail,.callback{
        position: relative;
    }
    .open-detail,.open-callback{
        position: absolute;
        top: 2rem;
    }
    .detail,.callback .title{
        cursor: pointer;
        width: 10rem;
    }
    .detail{
        margin-right: 1rem;
    }
    .open-detail{
        display: none;
        background-color: black;
        color: #ffffff;
        width: 10rem;
        height: 6rem;
        left: 50%;
        transform: translate(-50%);
    }
    .open-callback{
        display: none;
        background-color: black;
        color: #ffffff;
        width: 12rem;
        height: 3rem;
        left: 50%;
        transform: translate(-50%);
    }
    .open-detail:before{
        display: block;
        content: '';
        position: absolute;
        border-left: 0.5rem solid #ff00ff;
        border-bottom: 0.5rem solid #ff00ff;
        border-top: 0.5rem solid transparent;
        border-right: 0.5rem solid transparent;
        left: calc(50% - 0.5rem);
        top: -0.5rem;
        transform: rotate(135deg) translate(calc(0.5rem - 50%));
    }
    .detail:hover .open-detail{
        display: block;
    }
    .callback:hover .open-callback{
        display: block;
    }
</style>
<body>
    <div class="video-area">
        <div>
            <div class="video">
                <video
                        src='http://192.168.1.143:9999/1.mp4'
                        autoplay
                        controls
                        id="video"
                ></video>
            </div>
            <div>
                <input type="text" id="input" onfocus="data.getFocusTime()">
                <button onclick="data.pushData()">确定</button>
            </div>
        </div>
        <div class="list">
            <div class="list-head" id="list-head">

            </div>
            <div  id="list"></div>
        </div>
    </div>

    <div class="hover-show">
        <div class="normal">2019-02-12 12:43:52</div>
        <div class="hover-block">
            <div class="detail">
                <div class="title">展开详情</div>
                <div class="open-detail">
                    <div></div>
                </div>
            </div>
            <div class="callback">
                <div class="title">回复</div>
                <div class="open-callback"></div>
            </div>
        </div>
    </div>
</body>
<script>
    /**
     * 创建评论列表
     * @type {{clearList(): void, listClick(*=): void, id_(): *, setList(): void}}
     */
    var createList = {
        /**
         * 获取列表的demo
         * @returns {HTMLElement}  返回评论列表的demo
         * @private
         */
        id_(){
          return document.getElementById('list')
        },
        /**
         * 清空历史信息
         */
        clearList(){
            this.id_().innerHTML = null;
        },
        /**
         * 设置评论信息
         */
        setList(){
            this.clearList();//清除原有记录
            var list = '';
            data.data.map(function (item,index) {
                list = list+`<div index="${index}" class="list-item">
                                ${createList.setListTr(item)}
                            </div>`
            });
            this.id_().innerHTML = list;
            //添加评论点击
            this.id_().childNodes.forEach((item,index)=>{
               item.addEventListener('click',function (e) {
                   createList.listClick(data.data[index])
               })
            })
        },
        /**
         * 创建评论行的数据
         * @param val 行的数据
         *
         * */
        setListTr(val){
            var tr = '';
            data.listHeader.map((item)=>{
                tr += `<div style="width:${item.width}px">${val[item.prop]}</div>`
            });
            return tr;
        },
        /**
         * 评论的点击
         * @param val  点击的评论信息
         */
        listClick(val){
            console.log(val);
            video.setVideoTime(val.createTime);//设置点击评论当前时间点
        }
    };
    /**
     * 评论数据信息
     * @type {{data: [], id_(): *, pushData(): void}}
     */
    var data = {
        data:[],//评论的数据
        focusTime: 0,//输入框获取焦点的时间
        listHeader:[
            {
                prop:'timeNow',
                label:"时间",
                className:'list-createTime',
                width:120
            },{
                prop:'content',
                label:"评论内容",
                className: 'list-content',
                width: 200
            },{
                prop:'createTime',
                label:'发送时间',
                className: 'list-sendTime',
                width:120
            }
        ],
        /**
         * 返回获取评论信息的demo
         * @returns {HTMLElement}
         * @private
         */
        id_(){
            return document.getElementById('input')
        },
        /**
         * 添加新的评论信息
         */
        pushData(){
            var data_item = {
                content:this.id_().value,
                createTime:new Date().getTime(),
                timeNow:this.focusTime
            };
            this.data.push(data_item);
            //添加评论信息后，输入框置为空
            this.id_().value = null;
            createList.setList();// 创建评论列表
        },
        /**
         * 输入框获取焦点的时间更新
         */
        getFocusTime(){
            this.focusTime = video.getStopTime()
        },
        /**
         * 创建 表头
         */
        createListHeader(){
            var node = document.getElementById('list-head');
            var header = '';
            this.listHeader.map((item)=>{
                header += `<div class="list-head-item ${item.className}" style="width:${item.width}px">${item.label}</div>`
            });
            node.innerHTML = header;
        }
    };
    /**
     * 视频相关的
     * @type {{setVideoTime(*): void, id_(): *, getStopTime(): *}}
     */
    var video = {
        /**
         * 返回视频的demo
         * @returns {HTMLElement}
         * @private
         */
        id_(){
            return document.getElementById('video')
        },
        /**
         * 获取视频当前的播放时间
         * @returns {number | *}  返回时间点
         */
        getStopTime(){
            return this.id_().currentTime
        },
        /**
         * 设置当前 视频的 播放时间
         * @param time  设置的时间点
         */
        setVideoTime(time){
            this.id_().currentTime = time;
            this.id_().play();//播放
        }
    };

    /**
     * 初始化函数
     */
    function init() {
        data.createListHeader();
    }

    /**
     * 页面加载
     */
    window.onload = function () {
        init();
    }
</script>
</html>
